<template>
    <div>
        <div class='pwd-content'>
            <div class='title'>
                {{getTitle}}
            </div>
            <el-form v-show='userinfo.hasPay'
                label-width='85px' 
                label-position='left' 
                :model='form' 
                :rules='rules'
                ref='form'>
                <el-form-item label="账号">
                    {{this.$store.state.user.userinfo.name}}
                </el-form-item>
                <el-form-item label="原始密码" 
                    prop='oldPwd'>
                    <el-input v-model='form.oldPwd' type='password'></el-input><i class='el-icon-circle-close close' @click='reset("oldPwd")'></i>
                </el-form-item>
                <el-form-item label="新密码" prop='newPwd'>
                    <el-input v-model='form.newPwd' type='password'></el-input><i class='el-icon-circle-close close' @click='reset("newPwd")'></i>
                </el-form-item>
                <el-form-item label="确认新密码" prop='conPwd'>
                    <el-input v-model='form.conPwd' type='password'></el-input><i class='el-icon-circle-close close' @click='reset("conPwd")'></i>
                </el-form-item>
                <div class='btn-group'>
                    <el-button type='primary' class='board btn' @click='submit("form")' :disabled='btnIsDisabled'>提交</el-button><el-button class='board btn' @click='resetAll("form")'>重置</el-button> 
                    <el-button @click='forgetPayPwd'
                        v-show='getRouteId === "pay"'>
                        忘记密码
                    </el-button>
                </div>
            </el-form>

            <el-form v-show='!userinfo.hasPay'
                label-width='80px'
                label-position='left' 
                :model='setPayForm'
                :rules='setPayRules'
                ref='setPayForm'>
                <el-form-item label="支付密码" prop='pwd'>
                    <el-input v-model='setPayForm.pwd' type='password'></el-input><i class='el-icon-circle-close close' @click='reset("pwd", "setPayForm")'></i>
                </el-form-item>
                <el-form-item label="确认密码" prop='conPwd'>
                    <el-input v-model='setPayForm.conPwd' type='password'></el-input><i class='el-icon-circle-close close' @click='reset("conPwd", "setPayForm")'></i>
                </el-form-item>
                <div class='btn-group'>
                    <el-button type='primary' class='board btn' @click='submit("setPayForm")' :disabled='payBtnIsDisabled'>提交</el-button><el-button class='board btn' @click='resetAll("setPayForm")'>重置</el-button> 
                </div>
            </el-form>
        </div>

        <el-dialog :visible.sync='remindPayPwd'
            title='找回支付密码'
            :modal='false'
            class='dialog-pay'>
            <el-form v-if='validatePhone'
                label-width='55px'
                label-position='left'
                :model='valiPhoneForm'
                :rules='valiPhoneRules'
                ref='valiPhoneForm'>
                <el-form-item label="手机号" prop='phone'>
                    <el-input v-model='valiPhoneForm.phone' placeholder='请输入已绑定的手机号'></el-input>
                </el-form-item>
                <el-form-item label="验证码"
                    prop='code'
                    class='code'>
                    <el-input v-model='valiPhoneForm.code' placeholder='请输入验证码'></el-input><send-code :phone='valiPhoneForm.phone' ref='code' :type='2' style='margin-left:5px;'></send-code>
                </el-form-item>
                <el-row>
                    <el-button type='primary' 
                        @click='setPayNext("valiPhoneForm")' 
                        :disabled='payBtnIsDisabled'
                        style='width: 100%;margin-top:50px;'>下一步</el-button>
                </el-row>
            </el-form>
            <el-form v-else
                label-width='70px'
                label-position='left'
                :model='newPayForm'
                :rules='newPayRules'
                ref='newPayForm'>
                <el-form-item label="新密码" prop='pwd'>
                    <el-input v-model='newPayForm.pwd' type='password' placeholder='请输入新密码'></el-input>
                </el-form-item>
                <el-form-item label="确认密码"
                    prop='conPwd'>
                    <el-input v-model='newPayForm.conPwd' type='password' placeholder='请再次输入新密码'></el-input>
                </el-form-item>
                <el-row>
                    <el-button type='primary' 
                        @click='modifyNewPayPwd("newPayForm")' 
                        :disabled='payBtnIsDisabled'
                        style='width: 100%;margin-top:50px;'>完成</el-button>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import passwordJs from './password.js';
    module.exports = passwordJs;
</script>

<style lang='less' scoped>
  @import url(password.less);
</style>